<template>
	<view class="content">
		<view class="example">
			<overhaul-step :bidding="isBidding" :active="active" v-if="type == 0"/>
			<view class="buttn" v-if="type == 0">
				<button type="primary" @click="submitData">提交</button>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>基本信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>申请人员：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_user_name}}</text>
				</view>
			</view>
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>所属部门：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.apply_dept_name}}</text>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>申报时间：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_date}}</text>
				</view>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>检修信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.overhaul_type_desc}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*单据类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.bill_type_desc}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*施工类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.build_type_desc}}</text>
				</view>
			</view>
			
			<view v-if="showBuild">
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*施工单位：</label>
					</view>
					<view class="dec_ri">
						<text>{{jsonData.build_unit}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*单位负责人：</label>
					</view>
					<view class="dec_ri">
						<text>{{jsonData.build_person}}</text>
					</view>
				</view>
			</view>
			
			<view class="dec_li dec_flex" v-if="jsonData.fault_class  !=2">
				<view class="dec_le">
					<label>*检修装置：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.equipment_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修设备：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*设备位号：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_no}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex" v-if="jsonData.work_hours">
				<view class="dec_le">
					<label>工时：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.work_hours}}</text>
				</view>
			</view>
			<view class="dec_li " v-if="jsonData.pics.length>0">
				<view class="dec_le">
					<label>拍照取证：</label>
				</view>
				<view class="dec_ri">
					<view class="pic-view">
						<view style="width: 70%; display: flex;" >
							<view v-for="(jtem, j) in jsonData.pics" :key = "j" style="margin: 10rpx;">
								<image :src="fileUrl + jtem.pic_url" class="detail_img" @click="previewImg(j)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>*检修内容：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.check_content}}</text>
				</view>
			</view>
		</view>
		
		<!-- 审核信息 -->
		<view>
			<view class="criter_bt">
				<view class="line"></view>
				<text>审核信息</text>
			</view>
			
			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*审核结果：</label>
				</view>
				<view class="dec_ri" v-if="type == 0">
					<radio-group name="result" @change="radioChange" >
						<label>
							<radio value="r1" color="#267DFF" checked="true" style=" transform:scale(0.8)"/><text style="margin-left: 10rpx;">通过</text>
						</label>
						<label>
							<radio value="r2" color="#267DFF" style=" transform:scale(0.8)"/><text style="margin-left: 10rpx;">驳回</text>
						</label>
					</radio-group>
				</view>
				<view v-if="type == 1">
					<text style="color: #ff0000;" v-if="jsonData.status == 2">{{jsonData.status_desc}}</text>
					<text style="color: #00cf00;" v-if="jsonData.status > 2">{{jsonData.status_desc}}</text>
				</view>
			</view>
			
			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*仪表班长：</label>
				</view>
				<view class="dec_ri">
					<text>{{userName}}</text>
				</view>
			</view>
			
			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*签字确认：</label>
				</view>
				<view class="sign-view"  v-if="type == 0">
					<image :src=" 'data:image/svg+xml;base64,' + signStr" v-if="signStr != ''"></image>
					<Signature  ref="sig" v-model="signStr" class="signture"></Signature>
					<text @click="startSign()">+</text>
				</view>
				<view class="sign-view"  v-if="type == 1">
					<image :src="fileUrl + jsonData.audit_sign" @click="previewSign"></image>
				</view>
			</view>
			
			<!-- <view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*许可检修时间：</label>
				</view>
				<view class="dec_ri">
					<uni-datetime-picker type="datetime" v-if="type == 0" class="m-picker" v-model="permissionDate" :border="false" :clearIcon="false"/>
					<text v-if="type == 1">{{jsonData.permission_date}}</text>
				</view>
			</view> -->
		</view>
		
		<view class="choose-box" v-if="!isBidding & type == 0 & result & !showBuild">
			<view style="color: #267DFF; font-size: 32rpx;">*指派给:</view>
			<picker @change="teamPickerChange" :value="teamIndex" :range="teams" range-key="team_name">
				<view >{{teams[teamIndex].team_name}}</view>
			</picker>
		</view>
		
		<view class="choose-box" v-if="result & type == 0 & showBuild">
			<view style="color: #267DFF; font-size: 32rpx;">*指派给:</view>
			<picker @change="chargePickerChange" :value="chargeIndex" :range="charge" range-key="user_name">
				<view >{{charge[chargeIndex].user_name}}</view>
			</picker>
		</view>
		
	</view>
</template>

<script>
	import OverhaulStep from '@/components/selfs/OverhaulStep.vue'
	import Signature from '@/components/sin-signature/sin-signature.vue'
	import {getFormatDateTime} from '@/utils/date-util.js'
	import {svg2Png} from '@/utils/base64.js'
	import {FILE_URL, saveAuditInfo, getTeamList, getChargeUser} from '@/api/maintenance/selfs.js'
	export default {
		components: {
			OverhaulStep,
			Signature
		},
		data() {
			return {
				isBidding: false,
				active: 0,
				type: 0,
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				signStr: '',
				signPng: '',
				now: '',
				permissionDate: '',
				result: true,
				jsonData: {},
				fileUrl: FILE_URL,
				teamIndex: 0,
				teams: [{team_name: '请选择接收任务班组'}],
				charge: [{user_name: '请选择负责人'}],
				chargeIndex: 0,
				showBuild: false
			}
		},
		methods: {
			dateChange(e) {
				this.permissionDate = e.detail.value
			},
			radioChange: function(evt) {
				if('r1' === evt.detail.value) {
					this.result = true
				} else {
					this.result = false
				}
			},
			// 查询竞价信息
			fetchTeamData() {
				console.log('TEAM ', this.teams.length)
				getTeamList().then(res => {
					this.teams = this.teams.concat(res.datas)
					console.log('TEAM 2 ', this.teams)
				})
			},
			teamPickerChange(e) {
				this.teamIndex = e.detail.value
			},
			//查询负责人
			fetchChargeUser(dept) {
				let params = {apply_dept : dept}
				getChargeUser(params).then(res => {
					this.charge = this.charge.concat(res.datas)
				})
			},
			chargePickerChange(e) {
				this.chargeIndex = e.detail.value
			},
			previewImg(index) {
				let pics = []
				for (let i = 0; i < this.jsonData.pics.length; i ++) {
					pics[i] = this.fileUrl + this.jsonData.pics[i].pic_url
					console.log('PREVIEW', pics[i])
				}
				uni.previewImage({
					urls: pics,
					current: index
				});
			},
			previewSign() {
				let pics = []
				pics.push(this.fileUrl + this.jsonData.audit_sign)
				uni.previewImage({
					urls: pics
				});
			},
			
			async startSign() {
				let s = await this.$refs.sig.getSyncSignature();
				svg2Png(s, (e)=> {
					this.signPng = e
					console.log('签名数据', this.signPng);
				})
				
			},
			
			submitData() {
				if(this.signStr == '') {
					uni.showToast({
						title: '请签名确认',
						icon: 'none'
					})
					return
				}
				if(this.permissionDate == '') {
					uni.showToast({
						title: '请选择许可检修时间',
						icon: 'none'
					})
					return
				}
				if(!this.isBidding & this.result & !this.showBuild) {
					if(this.teamIndex == 0) {
						uni.showToast({
							title: '请选择接收任务班组',
							icon: 'none'
						})
						return
					}
				}
				if(this.result & this.showBuild){
					if(this.chargeIndex == 0) {
						uni.showToast({
							title: '请选择负责人',
							icon: 'none'
						})
						return
					}
				}
				let params 
				let bidding = this.isBidding ? 1 : 0
				if(this.isBidding || !this.result) {
					params = {is_bidding: bidding,
						overhaul_id: this.jsonData.overhaul_id, status: this.result ? '3' : '2', 
					audit_user: this.userId, audit_date: this.now, 
					audit_sign: this.signPng, bill_type: this.jsonData.bill_type}
				} else {
					let team_id = '', monitor_user = '', charge_user =''
					if(this.showBuild){
						charge_user = this.charge[this.chargeIndex].user_id
					}else{
						team_id = this.teams[this.teamIndex].team_id
						monitor_user = this.teams[this.teamIndex].monitor_user
					}
					params = {is_bidding: bidding, team_id: team_id, monitor_user: monitor_user,
						overhaul_id: this.jsonData.overhaul_id, status: this.result ? '3' : '2',
					audit_user: this.userId, audit_date: this.now, bill_type: this.jsonData.bill_type,
					audit_sign: this.signPng, charge_user: charge_user}
				}
				
				uni.showLoading({
					title: '正在提交'
				})
				saveAuditInfo(params).then(res=> {
					uni.$emit('audit_refresh')
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1500
					})
					setTimeout(function() {
						// uni.navigateBack({
						// })
						window.android.backWeb();
					}, 500)
				})
			}
		},
		onLoad:function(e){
			this.type = e.type
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			this.jsonData = JSON.parse(e.jsonData)
			this.now = getFormatDateTime()
			setTimeout(() => {
				this.permissionDate = getFormatDateTime()
			}, 500)
			this.isBidding = (this.jsonData.is_bidding == 1)
			this.showBuild = (this.jsonData.bill_type == 3)
			this.fetchTeamData()
			this.fetchChargeUser(this.jsonData.apply_dept)
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.content{
		width: 100%;
		margin: 0 auto 80upx;
	}
	.example {
		width: 91%;
		margin: 20upx auto 20upx;
		padding: 0 30upx 0upx
	}
	.example-body {
		padding: 0 40upx
	}
	.buttn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #FFF;
		
	}
	
	.buttn button {
		font-size: 30upx;
		background: #267dff;
		border-radius: 0;
		flex: 1;
		border-radius: 8rpx;
	}
	.criter_bt{
		padding: 0 10px;
		height: 50px;
		background-color: #f7f7f7;
		font-weight: normal;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.line{
		width: 8upx;
		height: 30upx;
		background: #267DFF;
		border-radius: 10upx;
		display: inline-block;
		vertical-align: middle;
	}
	.criter_bt text{
		padding-left: 10upx;
		vertical-align: middle;
		font-size: 32upx;
		color: #333333;
	}
	.dec_main{
		width: 94%;
	}
	.dec_li{
		width: 100%;
		margin: 30rpx  20rpx ;
		overflow: hidden;
	}
	.dush_li{
		border-bottom: 1upx solid #f4f4f4;
		padding-bottom: 20upx;
	}
	.dec_le{
		width: 30%;
		float: left;
	}
	.dec_ri{
		float: left;
		width: 70%;
	}
	.dec_flex{
		height: 60upx;
		display: flex;
		align-items: center;
	}
	
	.dec_li label{
		color: #267DFF;
		font-size: 30upx;
	}
	.dec_li text{
		color: #666666;
		font-size: 30upx;
	}
	.dec_li .inppu{
		font-size: 30upx;
	}
	.sign-view {
		display: flex;
		align-items: center;
	}
	.sign-view image {
		width: 150rpx;
		height: 60rpx;
		border: #d4ced8 solid 1rpx;
		border-radius: 5rpx;
		margin-right: 30rpx;
	}
	.sign-view text {
		width: 150rpx;
		height: 60rpx;
		border: #267DFF solid 1rpx;
		border-radius: 5rpx;
		color: #267DFF;
		font-size: 45rpx;
		text-align: center;
	}
	.signture {
		width: 0;
		height: 0;
	}
	.m-picker {
		margin-left: -25rpx;
	}
	.bottom-view {
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.detail_img {
		width: 150rpx;
		height: 150rpx;
		border: #f4f4f4 solid 1rpx;
	}
	.pic-view {
		display: flex;
		align-items: center;
	}
	.choose-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}
</style>
